<template>
	<view style="width: 710rpx;margin: 0 auto;padding-top: 20rpx;">
		<view style="width: 100%;padding: 15rpx;background-color: #fff;border-radius: 10rpx;">
			<view style="color: #000;font-size: 31rpx;">精选档口</view>
			<view style="display: flex;align-items: center;flex-wrap: wrap;margin-left: -25rpx">
				<view
					style="display: flex;flex-direction: column;align-items: center;margin-left: 25rpx;margin-top: 15rpx;"
					v-for="(item, index) in res.list" :key="index" @click="clickSwiper(item)">
					<image :src="item.img" mode="aspectFill" style="width: 210rpx;height: 210rpx;border-radius: 10rpx;">
					</image>
					<view
						style="color: #333333;font-size: 23rpx;margin-top: 8rpx;width: 210rpx;text-align: center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
						{{ item.storeName }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		modelNavigateTo
	} from "./tpl";
	export default {
		title: "导航栏",
		props: ["res"],
		watch: {
			res: {
				handler(newValue, oldValue) {
					this.$set(this, "res", newValue);
				},
				deep: true,
			},
		},

		mounted() {

		},
		methods: {
			clickSwiper(item) {
				console.log(item);
				modelNavigateTo(item);
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "./tpl.scss";
</style>